<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router";
import { getOSSURL } from "@/utils/utils";

const tabItems = reactive([
  {
    title: "首页",
    icon: getOSSURL("/imgs/h5-others/底部图标/home.png"),
    iconSelect: getOSSURL("/imgs/h5-others/底部图标/home(1).png"),
    path: "/",
  },
  {
    title: "报名",
    icon: getOSSURL("/imgs/h5-others/底部图标/shop.png"),
    iconSelect: getOSSURL("/imgs/h5-others/底部图标/shop(1).png"),
    path: "/mall",
  },
  {
    title: "课程",
    icon: getOSSURL("/imgs/h5-others/底部图标/category.png"),
    iconSelect: getOSSURL("/imgs/h5-others/底部图标/category(1).png"),
    path: "/course",
  },
  {
    title: "我的",
    icon: getOSSURL("/imgs/h5-others/底部图标/find.png"),
    iconSelect: getOSSURL("/imgs/h5-others/底部图标/find(1).png"),
    path: "/promotion",
  },
]);

const route = useRoute();
const router = useRouter();

const activeName = computed({
  get: () => route.path,
  set: (val) => {
    router.replace(val);
  },
});
</script>

<template>
  <div>
    <nut-tabbar v-model="activeName" unactive-color="#7d7e80">
      <nut-tabbar-item v-for="item in tabItems" :key="item.title" :name="item.path" :tab-title="item.title">
        <template #icon="props">
          <img class="w-6! h-6!" :src="props.active ? item.iconSelect : item.icon" alt="" />
        </template>
      </nut-tabbar-item>
    </nut-tabbar>
  </div>
</template>
